<template>
  <div class="adeio">
    <Navi :title="'预告片'" :flexd="true" />
    <div class="video">
      <video autoplay class="auto-video" width="100%"
    height="240px" controls :src="params.url"></video>
    </div>
    <div class="vtitle">
      {{ params.title }}
    </div>
    <div class="time">
      {{
        new Date(parseInt(params.time))
          .toLocaleString()
          .replace(/:\d{1,2}$/, " ")
          .slice(0, 9)
          .replace(/\s*/g, "")
      }}
    </div>

    <div class="btn">
      <van-cell title="立即分享" @click="showShare = true" />
      <van-share-sheet
        v-model="showShare"
        title="立即分享给好友"
        :options="options"
        @select="shareToRoom(0)"
      />
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import Navi from "../components/Navi.vue";

export default {
  name: "Adeio",
  components: {
    Navi,
  },
  data() {
    return {
      params: {
        url: "",
        title: "",
        time: "",
      },
      showShare: false,
      options: [
        { name: "QQ空间", icon: "qq" }
      ]
    };
  },
  created() {
    this.params = this.$route.params;
  },
  methods: {
    onSelect(option) {
      Toast(option.name);
      this.showShare = false;
    },

    //分享到QQ空间(可用)
    shareToRoom() {
      //自定义内容
      const share = {
        title: "预告片",
        desc: this.params.title,
        image_url: [
          "https://img0.baidu.com/it/u=3972756829,4107740957&fm=253&fmt=auto&app=138&f=PNG?w=395&h=370",
        ],
        share_url: "https://地址",
      };
      let image_urls = share.image_url.map(function (image) {
        return encodeURIComponent(image);
      });
      //跳转地址
      location.replace(
        "https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=" +
          encodeURIComponent(share.share_url) +
          "&title=" +
          share.title +
          "&pics=" +
          image_urls.join("|") +
          "&summary=" +
          share.desc
      );
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.van-cell {
  width: 100px;
  border-radius: 10px;
  text-align: center;
  background-color: #07c160;
  color: #fff;
  margin-left: 270px;
}
.adeio {
  width: 100%;
  .vtitle {
    width: 85%;
    padding: 10px;
    font-size: 18px;
    box-sizing: border-box;
    overflow: hidden;
  }
  .time {
    color: #999;
    padding: 10px;
  }
}
</style>